<template>
	<view class="page">
		<myNavBar barIcon="back" title="案件信息"></myNavBar>
		<view class="mine-edit">
			<uni-forms ref="form" :modelValue="userInfo" label-position="right" :rules="rules" label-width="20%">
				<uni-forms-item label="案件名称" name="caseName" v-show="editId">
					<uni-easyinput type="text" v-model="userInfo.caseName" disabled/>
				</uni-forms-item>
				<uni-forms-item label="委托人" name="client">
					<uni-easyinput type="text" v-model="userInfo.client" />
				</uni-forms-item>
				<uni-forms-item label="委托类型" name="clientType">
    				<uni-data-select
    				  v-model="userInfo.clientType"
    				  :localdata="clientTypeList"
					  placeholder="请选择委托类型"
    				></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="案件类型" name="caseType">
					<uni-data-select
    				  v-model="userInfo.caseType"
    				  :localdata="caseTypeList"
					  placeholder="请选择案件类型"
    				></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="联系方式" name="clientPhone">
					<uni-easyinput v-model="userInfo.clientPhone" type="text" :placeholder="userInfo.userName" />
				</uni-forms-item>
				<uni-forms-item label="被告" name="defendant">
					<uni-easyinput v-model="userInfo.defendant" type="text" :placeholder="userInfo.userName" />
				</uni-forms-item>
				<uni-forms-item label="原告" name="plaintiff">
					<uni-easyinput v-model="userInfo.plaintiff" type="text" :placeholder="userInfo.userName" />
				</uni-forms-item>

				<uni-forms-item label="案件简介:" name="signature">
					<uni-easyinput type="textarea" v-model="userInfo.signature" placeholder="请输入案件简介" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="onSubmit">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
        			caseName: "",
        			client: "",
        			clientType: null,
        			clientPhone: "",
        			defendant: "",
        			plaintiff: "",
        			caseType: "",
        			lowyer: uni.getStorageSync("lowyer"),
				},
				clientTypeList: [
					{
						value: 1,
						text: "个人",
					},
					{
						value: 2,
						text: "企业",
					},
				],
				caseTypeList: [
					{
						value: 1,
						text: "婚姻纠纷",
					},
					{
						value: 2,
						text: "房产纠纷",
					},
					{
						value: 3,
						text: "合同纠纷",
					},
				],
				rules: {
					client: {
						rules: [{
							required: true,
							errorMessage: '请输入委托人',
						}]
					},
					clientType: {
						rules: [{
							required: true,
							errorMessage: '请选择委托类型',
						}]
					},
					clientPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式',
						}]
					},
					defendant: {
						rules: [{
							required: true,
							errorMessage: '请输入被告',
						}]
					},
					plaintiff: {
						rules: [{
							required: true,
							errorMessage: '请输入原告',
						}]
					},
					caseType: {
						rules: [{
							required: true,
							errorMessage: '请选择案件类型',
						}]
					},
				},
				editId: '',
			};
		},
		onLoad(options) {
  		  // options 是一个对象，包含了传递过来的参数
  		  this.editId = options.id;
  		  console.log('Received ID:', this.editId);
  		},
		watch: {
  		  editId: {
  		    handler(newValue) {
				if (newValue) {
				  this.getEditCase(newValue);
				}
  		    },
  		    immediate: true,
  		  },
  		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			getEditCase(editId) {
				this.$httpRequest({
					url: `/case/caseInfo/${editId}`,
					method: 'GET',
				}).then(res => {
					console.log('editCase==============>', res);
					this.userInfo = res.data;
				})
			},
			change(e) {
				console.log(e);
			},
			onSubmit(form) {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					this.$httpRequest({
						url: "/case/addCase",
						method: "POST",
						data: this.userInfo,
					}).then(() => {
						// this.$store.commit("setUserInfo", this.userInfo);
						uni.showToast({
							title: "保存成功",
							icon: "none",
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					});
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.mine-edit {
		height: calc(100% - 100px);
		padding: 20rpx;

		.head-image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.radio {
		margin-right: 20rpx;
	}
</style>